<template>
  <div class="page">
    <el-row :gutter="18">
      <el-col :span="7">
        <el-card class="box-card left-card" :body-style="{ padding: 0 }">
          <!-- left card -->
          <div class="left-item">
            <el-button @click="handleToUserHome" class="back-btn" type="primary" plain>返回个人主页</el-button>
          </div>
          <div class="left-item active-item">个人资料编辑</div>
        </el-card>
      </el-col>
      <el-col :span="17">
        <el-card class="box-card">
          <div class="user-info-editor-wrapper">
            <!-- info-top -->
            <div class="user-info-top">
              <!-- FIXME: 使用组件封装，简化代码 -->
              <!-- FIXME: input数据校验 -->

              <!-- TODO: 修改头像功能 -->
              <el-upload class="avatar-uploader" action="http://127.0.0.1:3000/api/v1/upload/image" name="image"
                :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload">
                <el-avatar class="avatar" :size="80" :src="avatarUrl"></el-avatar>
                <div class="avatar-mask">修改</div>
              </el-upload>
              <div v-if="isEditNicname">
                <el-input v-model="userForm.nickname" placeholder="用户昵称"></el-input>
                <el-button @click="handleSave('isEditNicname', 'nickname')" type="primary">
                  保存
                </el-button>
                <el-button @click="handleChangeEdit('isEditNicname', 'nickname')">
                  取消
                </el-button>
              </div>
              <div v-else class="nickname">
                {{ userForm.nickname }}
              </div>
              <el-link v-if="!isEditNicname" @click="handleEdit('isEditNicname')" class="edit-btn" type="primary">修改
              </el-link>
            </div>
            <el-divider></el-divider>
            <!-- info-content -->
            <div class="user-info-content">
              <div class="user-info-item">
                <span class="label">个性签名：</span>
                <span class="form-span" v-if="isEditSignature">
                  <el-input v-model="userForm.signature" placeholder="个性签名"></el-input>
                  <el-button @click="handleSave('isEditSignature', 'signature')" type="primary">
                    保存
                  </el-button>
                  <el-button @click="handleChangeEdit('isEditSignature', 'signature')">
                    取消
                  </el-button>
                </span>
                <span v-else>
                  <span v-if="userForm.signature">{{ userForm.signature }}</span>
                  <span v-else class="not-sign">这个人没有写任何签名...</span>
                  <el-link @click="handleEdit('isEditSignature')" class="edit-btn" type="primary">修改
                  </el-link>
                </span>
              </div>
              <div class="user-info-item">
                <span class="label">性别：</span>
                <span class="form-span" v-if="isEditSex">
                  <el-radio-group v-model="userForm.sex" class="sex-radio-group">
                    <el-radio :label="0" size="large">保密</el-radio>
                    <el-radio :label="1" size="large">男</el-radio>
                    <el-radio :label="2" size="large">女</el-radio>
                  </el-radio-group>
                  <el-button @click="handleSave('isEditSex', 'sex')" type="primary">
                    保存
                  </el-button>
                  <el-button @click="handleChangeEdit('isEditSex', 'sex')">
                    取消
                  </el-button>
                </span>
                <span v-else>
                  <span>{{ sexMap[userForm.sex] }}</span>
                  <el-link @click="handleEdit('isEditSex')" class="edit-btn" type="primary">修改</el-link>
                </span>
              </div>
              <div class="user-info-item">
                <span class="label">电子邮箱：</span>
                <span class="form-span" v-if="isEditEmail">
                  <el-input v-model="userForm.email" type="email" placeholder="电子邮箱"></el-input>
                  <el-button @click="handleSave('isEditEmail', 'email')" type="primary">
                    保存
                  </el-button>
                  <el-button @click="handleChangeEdit('isEditEmail', 'email')">
                    取消
                  </el-button>
                </span>
                <span v-else>
                  <span>{{ userForm.email }}</span>
                  <el-link @click="handleEdit('isEditEmail')" class="edit-btn" type="primary">修改</el-link>
                </span>
              </div>
              <div class="user-info-item">
                <span class="label">常用标签：</span>
                <span>
                  <el-tag v-for="tag in tags" :key="tag._id" class="tag">{{ tag.name }}</el-tag>
                </span>
                <el-link class="edit-btn" type="primary">修改</el-link>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import api from '@/api'
import { ElMessage } from 'element-plus'
export default {
  name: 'UserEditorView',
  data() {
    return {
      userForm: {
        avatarUrl: "",
        nickname: "",
        signature: "",
        sex: 0,
        email: "",
      },
      isEditNicname: false,
      isEditSignature: false,
      isEditSex: false,
      isEditEmail: false,
      isEditTags: false,
      sexMap: {
        0: '保密',
        1: '男',
        2: '女'
      },
      tags: [{ _id: 1, name: 'test1' }, { _id: 1, name: 'test2' }]
    }
  },
  computed: {
    ...mapState({
      avatarUrl: state => state.user.avatarUrl,
      nickname: state => state.user.nickname,
      signature: state => state.user.signature,
      sex: state => state.user.sex,
      email: state => state.user.email
    })
  },
  mounted() {
    this.userForm.avatarUrl = this.avatarUrl
    this.userForm.nickname = this.nickname
    this.userForm.signature = this.signature
    this.userForm.sex = this.sex
    this.userForm.email = this.email
  },
  methods: {
    handleToUserHome() {
      this.$router.push({ name: 'user-home' })
    },
    handleEdit(editName) {
      this[editName] = true
    },
    handleChangeEdit(editName, propName) {
      this.userForm[propName] = this[propName]
      this[editName] = false
    },
    handleSave(editName, propName) {
      this[editName] = false
      switch (propName) {
        case "avatarUrl":
          api.user.changeAvatarUrl(this.userForm.avatarUrl).then((result) => {
            this.$store.commit('user/setInfo', result.data.user)
            ElMessage.success('修改成功')
          })
          break
        case "nickname":
          api.user.changeNickname(this.userForm.nickname).then((result) => {
            this.$store.commit('user/setInfo', result.data.user)
            ElMessage.success('修改成功')
          })
          break
        case "signature":
          api.user.changeSignature(this.userForm.signature).then((result) => {
            this.$store.commit('user/setInfo', result.data.user)
            ElMessage.success('修改成功')
          })
          break
        case "sex":
          api.user.changeSex(this.userForm.sex).then((result) => {
            this.$store.commit('user/setInfo', result.data.user)
            ElMessage.success('修改成功')
          })
          break
        case "email":
          api.user.changeEmail(this.userForm.email).then((result) => {
            this.$store.commit('user/setInfo', result.data.user)
            ElMessage.success('修改成功')
          })
          break
        default:
          console.error('handleSave() propName error')
          break
      }
    },
    handleAvatarSuccess(response) {
      // 图片上传成功
      const avatarUrl = response.data.path
      api.user.changeAvatarUrl(avatarUrl).then((result) => {
        this.$store.commit('user/setInfo', result.data.user)
        ElMessage.success('修改成功')
      })
      console.log('图片上传成功')
    },
    beforeAvatarUpload(rawFile) {
      // 上传文件之前的钩子
      console.log('rawFile.type', rawFile.type)
      const fileType = ['image/jpeg', 'image/png']
      if (!fileType.includes(rawFile.type)) {
        ElMessage.error('图片格式只能为JPG/PNG格式')
        return false
      } else if (rawFile.size / 1024 / 1024 > 4) {
        ElMessage.error('图片大小不能超过4MB')
        return false
      }
      return true
    }
  }
}
</script>

<style lang="scss" scoped>
.left-card {
  display: flex;
  flex-direction: column;

  .back-btn {
    width: 190px;
  }

  .left-item {
    text-align: center;
    padding: 8px 0;
    margin: 18px 0;
    // height : 80px;
  }

  .active-item {
    border-left: 4px solid var(--el-color-primary);
  }
}

.user-info-editor-wrapper {
  padding: 46px 46px 26px;

  .el-input {
    margin-bottom: 12px;
  }

  .user-info-top {
    display: flex;
    flex-direction: row;
    align-items: flex-end;

    .avatar-uploader {
      position: relative;

      .avatar-mask {
        position: absolute;
        top: 0;
        left: 0;
        width: 80px;
        height: 80px;
        background-color: transparent;
        border-radius: 40px;
        font-size: 12pt;
        text-align: center;
        line-height: 80px;
        color: transparent;
        transition: all 0.2s ease-in-out;

        &:hover {
          background-color: rgba(40, 40, 40, 0.8);
          color: white;
        }
      }

      .avatar {
        margin-right: 18px;
      }
    }

    .nickname {
      font-size: 18pt;
    }
  }

  .user-info-content {
    min-height: 120px;
    margin-left: 80px;
    padding: 2px 0 2px 26px;
    // padding-left : 20px;
    border-left: 3px solid var(--el-color-primary);

    .user-info-item {
      display: flex;
      flex-direction: row;
      align-items: flex-start;
      // margin : 28px 0;
      padding: 28px 0;
    }

    .form-span {
      display: inline-block;
      max-width: 300px;
    }

    .sex-radio-group {
      display: block;
      margin-bottom: 12px;
    }

    .not-sign {
      color: var(--el-text-color-secondary);
    }

    .label {
      display: inline-block;
      width: 106px;
      font-size: 13pt;
    }

    .tag:not(:last-child) {
      margin-right: 6px;
    }
  }
}

.edit-btn {
  display: inline-block;
  margin-left: 24px;
  padding-bottom: 4px;
}
</style>
